<template>
  <div>
    <el-dialog
      v-model="dialogFormVisibleLocal"
      title="修改角色"
      width="600"
      align-center
      :before-close="closeFn"
    >
      <div style="margin-bottom: 20px">填写角色属性</div>
      <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色路由" prop="roleRoute">
          <el-input v-model="form.roleRoute"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeFn">取消</el-button>
          <el-button type="primary" @click="submitForm">修改</el-button>
        </div>
      </template>

      <div style="margin: 30px 0px 20px 0px">分配角色权限</div>
      <div class="tree-box">
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="menuList"
          show-checkbox
          node-key="value"
          :default-checked-keys="checkedKeysArr"
          :props="defaultProps"
          @check="handleCheckChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch, nextTick } from "vue";

const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  menuList: {
    type: Array,
    default: () => [],
  },
  updateDialogData: {
    type: Object,
    default: () => ({
      checkedKeys: [],
    }),
  },
});

const emits = defineEmits(["changeVisible", "updateNodes", "updateRole"]);

const defaultProps = {
  children: "children",
  label: "label",
};

const form = reactive({
  roleName: props.updateDialogData.roleName,
  roleRoute: "",
});

const treeRef = ref(null);

const rules = reactive({
  roleName: [
    {
      required: true,
      message: "请输入角色名称",
      trigger: "blur",
    },
  ],
  roleRoute: [
    {
      required: true,
      message: "请输入角色路由",
      trigger: "blur",
    },
  ],
});

const checkedKeysArr = ref([]);

const handleCheckChange = (checkedKeys, allCheckedKeys) => {
  console.log(checkedKeys, allCheckedKeys);
  emits("updateNodes", {
    checkedKeys,
    allCheckedKeys,
  });
};

const formRef = ref(null);
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emits("updateRole", form);
      closeFn();
    } else {
      return false;
    }
  });
};

const closeFn = () => {
  emits("changeVisible", { newDialogFormVisible: false });
};

// 创建一个本地的响应式变量来控制对话框的显示，免得v-model报警告直接引用props值
const dialogFormVisibleLocal = ref(props.dialogFormVisible);

// 监听 props 的变化并更新本地变量
watch(
  () => props.dialogFormVisible,
  (newValue) => {
    dialogFormVisibleLocal.value = newValue;
  }
);

watch(
  () => props.updateDialogData,
  async (newValue) => {
    form.roleName = newValue.roleName;
    form.roleRoute = newValue.roleRoute;
    checkedKeysArr.value = newValue.checkedKeys;

    nextTick(() => {
      treeRef.value.setCheckedKeys(newValue.checkedKeys);
    });
  }
);
</script>

<style scoped>
.tree-box {
  border: 1px solid rgb(229, 230, 231);
  border-radius: 3px;
}
</style>
